<template>
  <div>
    <div class="article" v-for="(article, index) in articleList" v-bind:key="index" @click="toArticlePage(article.id)">
      <h2 class="title">{{article.title}}</h2>
      <h4 class="subtitle">{{article.subtitle}}</h4>
      <div class="content">
        {{article.content | preview}}
      </div>
      <div class="post-date">{{article.createDate | formatDate}}</div>
      <hr>
    </div>
    <div class="btn-load-more" style="margin: 0; float: left; width: auto;">
      <button class="load-more">
      ← NERER
      </button>
    </div>
    <div class="btn-load-more" style="margin: 0; float: right; width: auto;">
      <button class="load-more">
      OLDER →
      </button>
    </div>
  </div>
</template>

<script>
import {formatDate} from '@/assets/js/utils'

export default {
  filters: {
    formatDate(time) {
      let date = new Date(time)
      return formatDate(date, 'yyyy年MM月dd日')
    },
    preview(content) {
      let temp = content
      if (temp.length > 130) {
        temp = temp.substring(0, 130) + '...'
      }
      return temp
    }
  },
  data() {
    return {
      articleList: [
        {
          id: 1,
          title: "这是文章的标题",
          subtitle: "副标题",
          content: "一个上进的工程师，总有忙不完的事。除了要把工作做完，做好，还需要不断给自己充电，保证自己始终在有效地学习和成长。尽管如此，我们还是会觉得自己有两个状态：忙的状态，也就是很多外在的期限和需求的时候；以及“不忙”的状态，就是有一堆事情，但是没有哪件事似乎是必须立即执行的时候...",
          createDate: 1637644509000
        },
        {
          id: 2,
          title: "这是文章的标题",
          subtitle: "副标题",
          content: "一个上进的工程师，总有忙不完的事。除了要把工作做完，做好，还需要不断给自己充电，保证自己始终在有效地学习和成长。尽管如此，我们还是会觉得自己有两个状态：忙的状态，也就是很多外在的期限和需求的时候；以及“不忙”的状态，就是有一堆事情，但是没有哪件事似乎是必须立即执行的时候...",
          createDate: 1637644509000
        },
        {
          id: 3,
          title: "这是文章的标题",
          subtitle: "副标题",
          content: "一个上进的工程师，总有忙不完的事。除了要把工作做完，做好，还需要不断给自己充电，保证自己始终在有效地学习和成长。尽管如此，我们还是会觉得自己有两个状态：忙的状态，也就是很多外在的期限和需求的时候；以及“不忙”的状态，就是有一堆事情，但是没有哪件事似乎是必须立即执行的时候...",
          createDate: 1637644509000
        },
        {
          id: 4,
          title: "这是文章的标题",
          subtitle: "副标题",
          content: "一个上进的工程师，总有忙不完的事。除了要把工作做完，做好，还需要不断给自己充电，保证自己始终在有效地学习和成长。尽管如此，我们还是会觉得自己有两个状态：忙的状态，也就是很多外在的期限和需求的时候；以及“不忙”的状态，就是有一堆事情，但是没有哪件事似乎是必须立即执行的时候...",
          createDate: 1637644509000
        },
        {
          id: 5,
          title: "这是文章的标题",
          subtitle: "副标题",
          content: "一个上进的工程师，总有忙不完的事。除了要把工作做完，做好，还需要不断给自己充电，保证自己始终在有效地学习和成长。尽管如此，我们还是会觉得自己有两个状态：忙的状态，也就是很多外在的期限和需求的时候；以及“不忙”的状态，就是有一堆事情，但是没有哪件事似乎是必须立即执行的时候...",
          createDate: 1637644509000
        }
      ]
    }
  },
  methods: {
    toArticlePage(articleId) {
      this.$router.push({ 
        path: '/article',
        query: {
          id: articleId
        }
      })
    }
  }
}
</script>

<style scoped>
.load-more:hover {
  color: #337ab7;
  border: 2px solid #337ab7;
}
.post-date {
  font-size: 18px;
  font-size: 18px;
  font-weight: 300;
  color: black;
  margin-bottom: 10px;
}
.article:hover > * {
  color: #337ab7;
}
.article {
  cursor: pointer;
}
.content {
  font-style: italic;
  color: gray;
  margin-top: 15px;
  margin-bottom: 15px;
  letter-spacing: 2px;
}
.title {
  font-size: 25px;
  color: #000000;
  letter-spacing: 2px;
  padding-bottom: 15px;
  padding-top: 15px;
  text-decoration: none;
  font-weight: bold;
}
.subtitle {
  font-size: 18px;
  font-weight: 300;
  color: #000000;
  margin-bottom: 10px;
  letter-spacing: 1px;
}
</style>>